<template>
    <div class="container">
        <div class="upon">
            <dl>
                <dt>友情链接</dt>
                <dd><a href="#">南昌市住建委</a></dd>
                <dd><a href="#">南昌市人民政府</a></dd>
                <dd><a href="#">江西省人民政府</a></dd>
                <dd><a href="#">南昌轨道交通集团有限公司</a></dd>
                <dd><a href="#">中国城市轨道交通协会</a></dd>
                <dd><a href="#">鹭鹭行</a></dd>
            </dl>
            <div class="ercode">
                <!-- 两张二维码 -->
                <h2>关注我们</h2>
                <div class="er">
                    <div>
                        <img src="@/assets/img/ercode1.png" alt="">
                        <p>微信公众号</p>
                    </div>
                    <div>
                        <img src="@/assets/img/ercode2.png" alt="">
                        <p>鹭鹭行App</p>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="below">
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd><a href="#">| 电话:0791-96999</a></dd>
                <dd><a href="#">| 邮箱:ncrtxx@163.com</a></dd>
                <dd><a href="#">| 地址:江西省南昌市红谷滩新区 丰和中大道 地铁大厦</a></dd>
            </dl>
            <p>
                <span>Copyright 2017-2021</span>
                <span>南昌轨道交通集团有限公司</span>
                <span><a href="#">赣ICP备15000078号-1</a></span>
                <span><a href="#">赣公网安备36010802000083号</a></span>
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped lang="less">
    .container {
        margin: 50px auto;
        width: 100%;
        background-color: #f8f8f8;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .upon {
        width: 1300px;
        height: 300px;
        margin: 0px auto;
        display: flex;
        justify-content: center;
    }

    .upon dl {
        width: 400px;
        margin-top: 25px;
        cursor: pointer;
    }

    .upon .ercode {
        margin-top: 15px;
        width: 900px;
    }

    .upon dl dt {
        height: 50px;
        line-height: 50px;
        color: black;
        user-select: none;
    }

    .upon dl dd {
        height: 30px;
        line-height: 30px;
    }

    .upon dl dd a {
        color: #7c7c7c;
        text-decoration: none;
    }

    .upon dl dd a:hover {
        color: #f7bc08;
    }

    .ercode h2 {
        margin: 20px 0;
        text-align: center;
    }

    .ercode .er {
        display: flex;
        justify-content: center;
    }

    .ercode .er > div {
        width: 180px;
        height: 180px;
        text-align: center;
    }

    .ercode .er > div img {
        width: 130px;
        height: 130px;

    }

    .ercode .er > div p {
        margin: 10px 0;
    }

    .container .below {
        width: 1300px;
        height: 150px;
        margin: 25px auto;
    }

    .below dl {
        display: flex;
        justify-content: flex-start;
    }

    .below a {
        text-decoration: none;
        color: #7c7c7c;
    }

    .below a:hover {
        color: #f7bc08;
    }

    .below dl dt {
        margin: 10px 20px;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
    }

    .below dl dd {
        margin: 10px 20px;
        font-size: 18px;
        height: 30px;
        line-height: 30px;
    }

    .below p {
        color: #7c7c7c;
        margin-top: 10px;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
    }

    .below span {
        margin: 0px 10px;
    }
</style>